<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <meta name="format-detection" content="telephone=yes"/>
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta content="width=device-width,initial-scale=1,user-scalable=no" name="viewport">
    <title>实现 js 原生长按事件</title>
    <meta name="Keywords" content="" />
    <meta name="Description" content="" />
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <script type="text/javascript" src="../assets/js/jquery-1.11.2.min.js"></script>
    <script type="text/javascript">
        var tapParams = {
            timer: {},
            element: {},
            tapStartTime: 0,
            type: 'increment'
        };

        function clearTapTimer() {
            clearTimeout(tapParams.timer);
        }

        function clearTapHandlers() {
            clearTapTimer();

            $(tapParams.element).unbind('mouseup', clearTapTimer)
                .unbind('mouseleave', clearTapHandlers);

            /* 移动设备 */
            $(tapParams.element).unbind('touchend', clearTapTimer)
                .unbind('touchcencel', clearTapHandlers);
        }

        function tapEvent(aEvent, aType) {

            /* 阻止默认事件并解除冒泡 */
            aEvent.preventDefault();
            aEvent.stopPropagation();

            tapParams = {
                element: aEvent.target,
                startTime: new Date().getTime() / 1000,
                type: aType
            };

            $(tapParams.element).bind('mouseup', clearTapTimer)
                .bind('mouseleave', clearTapHandlers);

            /* 移动设备 */
            $(tapParams.element).bind('touchend', clearTapTimer)
                .bind('touchcencel', clearTapHandlers);

            changeNumber();
        }

        function changeNumber() {

            var currentDate = new Date().getTime() / 1000;
            var intervalTime = currentDate - tapParams.startTime;

            /* 根据长按的时间改变数值变化幅度 */
            if (intervalTime < 1) {
                intervalTime = 0.5;
            }
            var secondCount = intervalTime * 10;
            if (intervalTime == 3) {
                secondCount = 50;
            }
            if (intervalTime >= 4) {
                secondCount = 100;
            }

            var numberElement = $('.number');
            var currentNumber = parseInt(numberElement.val());

            if (tapParams.type == 'increment') {
                currentNumber += 1;
            } else if (tapParams.type == 'decrement') {
                currentNumber -= 1;
            }

            numberElement.val(currentNumber <= 0 ? 1 : currentNumber);

            tapParams.timer = setTimeout('changeNumber()', 1000 / secondCount);
        }
    </script>
</head>
<body>
    <!-- http://staticpage.test.yellowtulipshow.site/Tools/prototype_taphold.html -->
    <style type="text/css">
        .section {
            display: -webkit-flex;
            display: flex;
            -webkit-justify-content: center;
            justify-content: center;
            -webkit-flex-flow: row nowrap;
            flex-flow: row nowrap;
            -webkit-align-items: center;
            align-items: center;
            height: 30px;
            width: 230px;
            font-size: 16px;
        }
        .number {
            -webkit-flex: 1;
            flex: 1;
            width: 30px;
            height: 30px;
            border: 1px solid #000;
            display: inline-block;
            border-radius: 5px;
            margin: 0 10px;
            text-align: center;
        }
        .decrement, .increment {
            width: 30px;
            height: 30px;
            border: 1px solid #000;
            display: inline-block;
            border-radius: 5px;
            text-align: center;
            line-height: 28px;
            cursor: pointer;
            font-size: 20px;
        }
    </style>
    <div class="container">
        <div class="section">
            <div class="decrement" onmousedown="tapEvent(event, 'decrement')" ontouchstart="tapEvent(event, 'decrement')">－</div>
            <input class="number" value="1">
            <div class="increment" onmousedown="tapEvent(event, 'increment')" ontouchstart="tapEvent(event, 'increment')">＋</div>
        </div>
    </div>
</body>
</html>
